<template>
	<view class="qrcode-card" :class="{'qr-card--show':value}">
		<image class="qrcode-card__image" :src="src" mode="aspectFill"></image>
		<u-count-down ref="uCountDown" :timestamp="time" @end="$emit('time-end')" :autoplay="false" :show-days="false" :show-hours="false" show-minutes show-seconds separator="zh"></u-count-down>
	</view>
</template>

<script>
	export default {
		props:{
		  src:{
			  type:String,
			  default:''
		  },
		  time:{
			  type:Number,
			  default:0
		  }
		},
		watch:{
			time(value){
				value && this.$refs.uCountDown.start()
			}
		}
	}
</script>

<style lang="scss">
	.qrcode-card{
		margin-top: 30rpx;
		width: 650rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding: 50rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		height: 500rpx;
		&__image{
			width: 300rpx;
			height: 300rpx;
		}
	}
</style>
